<!DOCTYPE html>
<html>

<head>
    <title>我的博客</title>
    <meta name="referrer" content="no-referrer" />
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <link href="./assets/css/web.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
        crossorigin="anonymous"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="./assets/utf8-net/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="./assets/utf8-net/ueditor.all.js"></script>
    <script type="text/javascript" src="./assets/js/tz1989_uploader.js"></script>
</head>

<body>
    <!--导航栏-->
    <header>
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-xl">
                <a class="navbar-brand" href="#">我的博客</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">文章管理</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">关于博客</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <!--文章编辑-->
    <main class="container-xl">
        <div class="mb-3">
            <label for="txtTitle" class="form-label">文章标题</label>
            <input type="text" class="form-control" id="txtTitle" placeholder="文章标题">
        </div>
        <div class="mb-3">
            <label for="txtDescription" class="form-label">文章简介</label>
            <textarea class="form-control" id="txtDescription" rows="3"></textarea>
        </div>
        <div class="mb-3">
            <label for="txtContent" class="form-label">文章内容</label>
            <!-- 加载编辑器的容器 -->
            <script id="txtContent" name="content" type="text/plain">这里写你的初始化内容</script>
        </div>
        <div class="row">
            <div class="col mb-3">
                <label for="upLoadCoverImg" class="form-label">文章封面</label>
                <input type="file" class="form-control" id="upLoadCoverImg">
                <div id="coverImg"></div>
            </div>
            <div class="col mb-3">
                <label for="rStatus" class="form-label">文章状态</label>
                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="rStatus" id="r_show" checked>
                        显示
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="rStatus" id="r_hide">
                        隐藏
                    </label>
                </div>
            </div>
        </div>

        <div class="mb-3 text-center">
            <button type="button" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-secondary">取消</button>
        </div>
    </main>
    <!--版权信息-->
    <footer class="container-xl py-3 text-center">
        © 2024 - 编城的南墙
    </footer>
    <script>
        var ue = UE.getEditor('txtContent', {
            initialFrameHeight: 400,
            maximumWords: 50000
        });
        var uploader = tz1989_uploader({
            id: "upLoadCoverImg",
            url: "/api/file/upload",
            width: 100,
            css: { "color": "#fff", "text-align": "center", "padding-top": "5px" },
            cssClass: "btn btn-success btn-sm",
            text: "上传文件",
            accept: "",
            multiple: false,
            autoUpload: false,
            selecting: function (src, file, index) {
                $("#coverImg").html("<img src='" + src + "' width='100' />");
            },
            success: function (data, file, index) {
                console.log(data);
            }
        });
    </script>
</body>

</html>